<template>
  <el-dialog
    title="人员分配"
    :visible.sync="visible"
    width="30%"
    :before-close="handleClose"
  >
    <el-form
      :model="formData"
      ref="ruleForm"
      class="demo-ruleForm principal"
      v-loading="loading"
    >
      <el-form-item
        label="负责人"
        prop="personName"
      >
        <el-select
          v-model="formData.personName"
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="item in principalData"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <base-button
        class="unimportanceButton btnCancle"
        @click="handleClose"
      >取 消</base-button>
      <base-button
        class="minorImportantButton"
        type="primary"
        @click="handleSubmit"
      >确 定</base-button>
    </span>
  </el-dialog>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
// 基础数据
import { outPrincipalStatus } from '@/utils/common-select-data'
// 公用组件
// 按钮
import BaseButton from '@/components/base-button/index.vue'
// interface接口
import { ICommonSelectOptions } from '@/utils/common-interface'
@Component({
  name: 'DistributeUserDialog',
  components: {
    BaseButton
  }
})
export default class extends Vue {
  @Prop() private visible!: any
  private loading = false
  private principalData: ICommonSelectOptions[] = []
  private formData = {
    personName: '张文礼'
  }

  created() {
    this.getData()
  }

  // 功能
  getData() {
    this.principalData = outPrincipalStatus
  }

  private async handleSubmit() {
    // 父组件中必须定义一个personName变量来存放收货人
    (this.$parent as any).distributeUserDialogData.name = this.formData.personName
    this.$emit('handlesubmit')
  }

  // 表单取消
  private handleClose() {
    this.$emit('handleclose')
  }
}
</script>
<style lang="scss">
</style>
